<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-05-25 15:18:23
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2023-11-17 17:54:02
-->
<template>
	<el-form :model="formState" class="login-form" size="large">
		<p class="form-title" style="height: 3rem; display: flex; align-items: center"><span class="text-span">登录</span></p>
		<el-form-item class="mt10" :rules="[{ required: true, message: '请输入用户名!' }]">
			<label class="label-name">用户名</label>
			<el-input type="input" v-model="formState.username" placeholder="请输入用户名">
				<template #prefix>
					<icon-people theme="outline" fill="#333" />
				</template>
			</el-input>
		</el-form-item>
		<el-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
			<label class="label-name">密码</label>
			<el-input type="password" show-password v-model="formState.password" placeholder="请输入密码">
				<template #prefix>
					<icon-lock theme="outline" fill="#333" />
				</template>
			</el-input>
		</el-form-item>
    <SlideVerify v-model="formState.verificationCode"></SlideVerify>
		
    <el-button @click="handleLogin" :disabled="!formState.verificationCode" type="primary" class="w-100"> 登录 </el-button>

		<div class="tr w-100">
			<el-button @click="onForgetPassword" text type="primary"> 忘记密码？ </el-button>
		</div>

		<el-dialog v-model="dialogVisible" title="忘记密码" width="30%" :close-on-click-modal="false">
			<ForgetPassword v-if="dialogVisible" @refresh="dialogVisible = !dialogVisible"></ForgetPassword>
		</el-dialog>
	</el-form>
</template>

<script setup lang="ts">
import ForgetPassword from './ForgetPassword/index.vue'
import VerifyPage from './VerifyPage/index.vue'
import SlideVerify from './VerifyPage/SlideVerify.vue'

const emits = defineEmits(['submit'])
interface FormState {
	username: string
	password: string
	remember: boolean
  verificationCode:boolean
}
const formState = reactive<FormState>({
	username: '',
	password: '',
	remember: true,
  verificationCode:false
})

const dialogVisible = ref(false)
const reloadKey = ref(0)
const disabled = computed(() => {
	return !(formState.username && formState.password)
})
const onFinish = () => {
	reloadKey.value =Math.random()
}
const onForgetPassword = () => {
	dialogVisible.value = true
}

const handleLogin = ()=> {
  reloadKey.value =Math.random()
  emits('submit', formState)
}
</script>

<style scoped lang="scss">
@import '@/styles/scss/login.scss';

:deep(.el-form-item__content) {
	padding: 0 10px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #1a1a1a33;
	line-height: 2.5rem;

	.label-name {
		padding-left: 10px;
		font-weight: 400;
		font-size: 14px;
		text-align: left;
		color: #000000e6;
		opacity: 0.6;
	}

	.el-input__wrapper {
		box-shadow: none;
	}
}

.text-span {
	display: inline-block;
	font-weight: 900;
	color: #000;
	font-size: 2.25rem;
	margin-bottom: 27px;
}
</style>
